<template>
    <div id="app">
      <Head>我要发布</Head>
      <van-field
      readonly
      clickable
      required
      label="信息内容"
      class="reset_after no_border"
      />
      <div class="box_4">
      <van-field
      style="background-color:#f9f9f9;"
      v-model="sub.content"
      rows="5"
      autosize
      label=""
      type="textarea"
      placeholder="请输入信息内容"
      />
      </div>
      <div class="box_3">
          <div class="img_item" v-for="(item, index) in imgList" :key="index">
              <img
              :src="item.img_src"
              alt="item.title"
              class="img"
              @click="previewImg(index)"
              />
              <div class="delete_ico" @click="deleteImg(item.img)"></div>
          </div>
          <van-uploader
          v-if="imgList.length < 8"
          :preview-image="false"
          :after-read="uploadImg"
          :accept="'image/*'"
          >
              <div class="img_item for_upload">添加图片</div>
          </van-uploader>
      </div>
      <van-field
      v-model="sub.title"
      label="标题"
      placeholder="内容的第一句话会成为标题"
      class="reset_after"
      />
      <van-field
      required
      v-model="sub.name"
      label="联系人"
      placeholder="请填写联系人"
      class="reset_after"
      />
      <van-field
      required
      v-model="sub.call"
      label="电话"
      placeholder="请填写联系人电话"
      type="number"
      class="reset_after"
      />
      <div class="box_2">
        <van-field
          v-model="sub.address"
          label="地址"
          placeholder="详细地址"
          class="reset_after"
        />
        <div class="tag" @click="handlerShowMap">标注</div>
      </div>
      <van-popup
        v-model="showMap"
        position="top"
        :lazy-render="true"
        :overlay="true"
        style="width:100%;height:100%"
        >
        <Mapset
            ref="mapset"
            title="地图标注"
            :mapLat="sub.map_lat"
            :mapLng="sub.map_lng"
            :mapZoom="sub.map_zoom"
            :address="sub.address"
            @closeMap="handlerCloseMap"
        ></Mapset>
      </van-popup>
      <van-field
        readonly
        clickable
        required
        label="发布天数"
        class="reset_after no_border"
        v-if="daylist.length>0&&is_end"
        />
      <div class="list" v-if="daylist.length>0&&is_end">
        <div class="item" :class="sub.dayid&&sub.dayid==item.index?'selitem':''" v-for="(item,index) in daylist" :key="index" @click="onday(item.index,item.fee)">
          <div class="name">发布{{item.days}}天</div>
          <div class="money">￥<span>{{item.fee}}</span></div>
          <div class="center">{{item.tip}}</div>
        </div>
      </div>
      <div class="hr" v-if="daylist.length>0&&is_end"></div>
      <div class="toptile" v-if="!is_top" :class="daylist.length == 0||is_end?'mar':''">
          <div class="hrtwo"></div>
          <span>置顶信息、效果会更佳</span>
          <div class="hrtwo"></div>
      </div>
      <div v-if="!is_top" class="toptisp">置顶期间，信息显示在首页顶部，<br/>有更多的曝光次数，更容易让同城人看到！</div>
      <div v-if="!is_top" class="toplist clearfix">
        <div class="item" :class="!sub.topid?'sel':''"  @click="ontop('',0)">
          <div class="info">
            <div class="money">不置顶</div>
          </div>
        </div>
        <div class="item" v-for="(item,index) in toplist" :key="index" :class="sub.topid&&sub.topid==item.index?'sel':''" @click="ontop(item.index,item.fee)">
          <div class="info">
            <div class="money">{{item.fee + '元'}}</div>
            <div class="name">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="hr" v-if="!is_top"></div>
      <div class="btn" :class="is_top?'mar':''" @click="save">发布</div>
      <van-popup v-model="showPayment" closeable position="bottom">
            <PopupPayment
                :amount="paymoney"
                @handlerSubmit="handlerSubmit"
            ></PopupPayment>
        </van-popup>
        <PaySubmit ref="paySubmit" :payment="paymoth" success-url="/cityinfo/infopromanage"></PaySubmit>
    </div>
</template>
<script>
import Vue from 'vue'
import { ImagePreview } from 'vant'
import Mapset from '@/components/Mapset'
import PaySubmit from '@/components/service/PaySubmit'
import PopupPayment from '@/components/service/PopupPayment'
import http from '@/utils/http'
import api from '@/api'

Vue.use(ImagePreview)
export default {
  components: {
    Mapset,
    PaySubmit,
    PopupPayment
  },
  data () {
    return {
      showMap: false,
      sub: {
        id: '',
        classid: '',
        content: '',
        imgs: '',
        title: '',
        name: '',
        call: '',
        map_lat: 0,
        map_lng: 0,
        map_zoom: 0,
        address: '',
        dayid: '',
        topid: ''
      },
      is_top: 0,
      is_end: 1,
      imgList: [],
      previewImgList: [],
      daylist: [],
      toplist: [],
      daymoney: 0,
      topmoney: 0,
      paymoney: 0,
      paymoth: 'wxpay',
      showPayment: false
    }
  },
  created () {
    if (this.$route.query.id) {
      this.sub.id = this.$route.query.id
      this.getData()
    }
    if (this.$route.query.classid) {
      this.sub.classid = this.$route.query.classid
    }
    this.getdaySetmeal()
    this.gettopSetmeal()
  },
  computed: {
  },
  methods: {
    uploadImg (file) {
      let fileRaw = file.file
      let filetypeArr = (fileRaw.type || '').split('/')
      let filetype = filetypeArr[1]
      let tyepArr = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      if (tyepArr.indexOf(filetype) == -1) {
        this.$notify('文件类型不支持')
        return false
      }
      if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
        let size = this.$store.state.config.fileupload_size / 1024
        size = size.toFixed(1)
        this.$notify('文件大小超出限制，最大' + size + 'mb')
        return false
      }
      this.uploading = true
      http
        .postFormData(api.uploadFile, { file: file.file })
        .then(res => {
          this.uploading = false
          if (parseInt(res.code) === 200) {
            this.$notify({ type: 'success', message: res.message })
            this.imgList.push({
              img: res.data.file_id,
              img_src: res.data.file_url
            })
            this.setPreviewImgList()
          } else {
            this.$notify(res.message)
          }
        })
        .catch(err => {
          this.uploading = false
          console.log(err)
        })
    },
    // 删除图片
    deleteImg (img) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定删除该照片吗'
        })
        .then(() => {
          // 确定按钮
          this.imgList.splice(
            this.imgList.findIndex(
              item => parseInt(item.img) === parseInt(img)
            ),
            1
          )
          this.setPreviewImgList()
        })
        .catch(() => {
          // 取消按钮
        })
    },
    // 预览图片
    previewImg (index) {
      ImagePreview({
        images: this.previewImgList,
        showIndex: true,
        loop: false,
        startPosition: index,
        closeOnPopstate: true,
        closeable: true
      })
    },
    // 更新预览图片
    setPreviewImgList () {
      this.previewImgList = this.imgList.map(function (item) {
        return item.img_src
      })
    },
    handlerShowMap () {
      this.showMap = true
    },
    handlerCloseMap (mapInfo) {
      this.showMap = false
      if (mapInfo === undefined) {
        return false
      }
      this.sub.map_lat = mapInfo.lat
      this.sub.map_lng = mapInfo.lng
      this.sub.map_zoom = mapInfo.zoom
      this.sub.address = mapInfo.address
    },
    // 获取详情信息
    getData () {
      http.get(api.article_info, {id: this.sub.id}).then(res => {
        if (res.code == 200) {
          this.$nextTick(() => {
            this.sub.content = res.data.content
            this.imgList = res.data.img_arr.map(function (item) {
              return { img: item.id, img_src: item.img }
            })
            this.sub.title = res.data.title
            this.sub.name = res.data.linkman
            this.sub.call = res.data.mobile
            this.sub.map_lat = res.data.lat
            this.sub.map_lng = res.data.lon
            this.sub.address = res.data.address_detail
            this.is_top = res.data.is_top
            this.is_end = res.data.is_end
          })
        }
      })
    },
    // 获取发布天数套餐
    getdaySetmeal () {
      http.get(api.city_daysetmeal, {type_id: this.sub.classid}).then(res => {
        if (res.code == 200) {
          this.daylist = res.data
          if (this.daylist.length > 0) {
            this.sub.dayid = this.daylist[0].index + ''
            this.daymoney = this.daylist[0].fee
          }
          this.paymoney = Number(this.daymoney) + Number(this.topmoney)
        }
      })
    },
    // 获取置顶套餐
    gettopSetmeal () {
      http.get(api.city_topsetmeal).then(res => {
        if (res.code == 200) {
          this.toplist = res.data
        }
      })
    },
    onday (id, money) {
      this.sub.dayid = id + ''
      this.daymoney = money
      this.paymoney = Number(this.daymoney) + Number(this.topmoney)
    },
    ontop (id, money) {
      this.sub.topid = id + ''
      this.topmoney = money
      this.paymoney = Number(this.daymoney) + Number(this.topmoney)
    },
    save () {
      if (!this.sub.content) {
        this.$notify('请填写信息内容')
        return false
      }
      if (!this.sub.name) {
        this.$notify('请填写联系人')
        return false
      }
      if (!this.sub.call) {
        this.$notify('请填写联系人电话')
        return false
      }
      var numReg = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/
      var numRe = new RegExp(numReg)
      if (!numRe.test(this.sub.call)) {
        this.$notify('联系电话格式不正确')
        return false
      }
      for (var num = 0; num < this.imgList.length; num++) {
        if (num == '0') {
          this.sub.imgs = this.imgList[num].img
        } else {
          this.sub.imgs = this.sub.imgs + ',' + this.imgList[num].img
        }
      }
      http
        .post(api.city_release, {
          id: this.sub.id,
          type_id: this.sub.classid,
          content: this.sub.content,
          imgs: this.sub.imgs,
          title: this.sub.title,
          linkman: this.sub.name,
          mobile: this.sub.call,
          lat: this.sub.map_lat,
          lon: this.sub.map_lng,
          address_detail: this.sub.address
        })
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.sub.id = res.data.id
            if (this.sub.dayid || this.sub.topid) {
              if (this.is_end || !this.is_top) {
                this.showPayment = true
              } else {
                this.$notify({ type: 'success', message: res.message })
                this.$router.push({ path: '/cityinfo/infopromanage' })
              }
            } else {
              this.$notify({ type: 'success', message: res.message })
              this.$router.push({ path: '/cityinfo/infopromanage' })
            }
          } else {
            this.$notify(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handlerSubmit (payment) {
      this.paymoth = payment
      if (this.sub.dayid && this.sub.topid) {
        this.$refs.paySubmit.handlerSubmit(api.city_order_pay, {
          id: this.sub.id,
          order_type: 4,
          publish_index: this.sub.dayid,
          promo_index: this.sub.topid,
          pay_type: this.paymoth,
          redirect_url: this.$store.state.config.mobile_domain + 'cityinfo/infopromanage'
        })
      } else if (this.sub.dayid) {
        this.$refs.paySubmit.handlerSubmit(api.city_order_pay, {
          id: this.sub.id,
          order_type: 1,
          publish_index: this.sub.dayid,
          pay_type: this.paymoth,
          redirect_url: this.$store.state.config.mobile_domain + 'cityinfo/infopromanage'
        })
      } else {
        this.$refs.paySubmit.handlerSubmit(api.city_order_pay, {
          id: this.sub.id,
          order_type: 3,
          promo_index: this.sub.topid,
          pay_type: this.paymoth,
          redirect_url: this.$store.state.config.mobile_domain + 'cityinfo/infopromanage'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box_4 {
  width: 100vw;
  background-color: #ffffff;
  position: relative;
  padding: 0px 16px;
  textarea {
    width: calc(100vw - 32px);
    height: 130px;
    border: 0;
    background-color: #f9f9f9;
    font-size: 14px;
    resize: none;
    line-height: 1.8;
    padding: 5px 10px;
    &::placeholder {
      color: #c9c9c9;
    }
  }
}
.box_3 {
  .img_item {
    &.for_upload {
      margin: 0;
      padding-top: 40px;
      text-align: center;
      font-size: 12px;
      color: #c0c0c0;
      background: #f8f8f8 url("../../../assets/images/upload_add_ico.svg") center
        10px no-repeat;
      background-size: 22px;
    }
    .delete_ico {
      &::before {
        position: absolute;
        left: 5px;
        top: 9.5px;
        width: 10px;
        border-top: 1px solid #ffffff;
        content: " ";
        transform: rotate(45deg);
      }
      &::after {
        position: absolute;
        left: 9.5px;
        top: 5px;
        height: 10px;
        border-right: 1px solid #ffffff;
        content: " ";
        transform: rotate(45deg);
      }
      position: absolute;
      right: -6px;
      top: -6px;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .audit_bg {
      position: absolute;
      left: 0;
      top: 0;
      width: calc((100vw - 32px) / 4 - 14px);
      height: calc((100vw - 32px) / 4 - 14px);
      border-radius: 4px;
      text-align: center;
      line-height: calc((100vw - 32px) / 4 - 14px);
      color: #c0c0c0;
      font-size: 15px;
      background-color: rgba(0, 0, 0, 0.75);
      z-index: 1;
    }
    .img {
      width: calc((100vw - 32px) / 4 - 14px);
      height: calc((100vw - 32px) / 4 - 14px);
      border-radius: 4px;
      border: 0;
    }
    &:nth-of-type(4n) {
      margin-right: 0;
    }
    float: left;
    position: relative;
    width: calc((100vw - 32px) / 4 - 14px);
    height: calc((100vw - 32px) / 4 - 14px);
    border-radius: 4px;
    margin: 0 16px 16px 0;
  }
  padding: 10px;
  margin-top: 10px;
  margin-left: 6px;
  margin-right: 6px;
}
.box_2 {
  .tag {
    position: absolute;
    right: 17px;
    top: 0;
    padding: 15px 18px 15px 0;
    font-size: 14px;
    color: #666666;
    background: url("../../../assets/images/location_ico_blue.svg") right center
      no-repeat;
    background-size: 14px;
  }
  .text {
    &::placeholder {
      color: #c9c9c9;
    }
    font-size: 14px;
    border: 0;
    width: 180px;
    height: 40px;
    position: absolute;
    left: 119px;
    top: 5px;
    color: #333333;
  }
  &::after {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    transform: scaleY(0.5);
    border-bottom: 1px solid #ebebeb;
  }
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  position: relative;
  padding: 0 68px 0 0;
}
.list{
    margin-left: 16px;
    margin-right: 16px;
    display: flex;
    overflow-x: scroll;
    .item{
        width: 123px;
        height: 126px;
        margin-right: 9px;
        border-radius: 5px;
        border: 2px solid #e5ebf2;
        background-color: #ffffff;
        &.selitem{
            border: 2px solid #fdde35;
            background-color: #fff9e0;
        }
        .name{
            width: 119px;
            line-height: 1;
            margin-top: 22px;
            font-size: 15px;
            color: #55340a;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
        .money{
            width: 119px;
            line-height: 1;
            margin-top: 20px;
            margin-bottom: 15px;
            font-size: 13px;
            color: #ff5a00;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            span{
                line-height: 1;
                font-size: 20px;
            }
        }
        .center{
            width: 119px;
            line-height: 1;
            font-size: 12px;
            color: #aa9675;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
    }

}
.list::-webkit-scrollbar{
    display: none;
}
.hr{
    width: 100vw;
    margin-top: 27px;
    margin-bottom: 22px;
    height: 1px;
    background-color: #e5ebf2;
}
.toptile{
  display: flex;
  align-items: center;
  justify-content: center;
  &.mar{
    margin-top: 27px;
  }
  .hrtwo{
    width: 50px;
    height: 1px;
    background-color: #ff4747;
  }
  span{
    margin-left: 10px;
    margin-right: 10px;
    color: #ff4747;
    font-size: 15px;
    font-weight: bold;
  }
}
.toptisp{
  margin-top: 15px;
  text-align: center;
  font-size: 11px;
  color: #555555;
  line-height: 1.8;
}
.toplist{
  margin-top: 8px;
  margin-left: 16px;
  .item{
    width: calc((100vw - 32px - 16px) / 3);
    height: 50px;
    float: left;
    border-radius: 5px;
    border: 2px solid #e5ebf2;
    margin-right: 8px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    &.sel{
      border-color: #ffb39c;
      background: url("../../../assets/images/cityinfo/release/release_34.png") right bottom no-repeat;
      background-size: 20px 19px;
    }
    .info{
      text-align: center;
      .money{
        color: #ff5a00;
        font-size: 15px;
      }
      .name{
        margin-top: 3px;
        color: #999999;
        font-size: 12px;
      }
    }
  }
}
.btn{
  margin-left: 16px;
  margin-bottom: 23px;
  border-radius: 30px;
  width: calc(100vw - 32px);
  height: 44px;
  background-color: #1989f9;
  color: #ffffff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  &.mar{
    margin-top: 27px;
  }
}
</style>
